<template>
	<view class="container">
		<view v-for="(student, index) in students" :key="index" class="student-item">
			<view class="student-info">
				<view>学生ID: {{ student.id }}</view>
				<view>学生姓名: {{ student.name }}</view>
			</view>
			<view class="relative-list">
				<view v-for="relative in student.relatives" :key="relative._id" class="relative-item">
					<view>亲属姓名: {{ relative.name }}</view>
					<view>联系电话: {{ relative.phone }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		uniCloud
	} from '@dcloudio/uni-cloud';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const students = ref([]);

	onLoad(async () => {
		const studentObj = uniCloud.importObject('db_student');
		const studentRes = await studentObj.getStudentInfo();
		students.value = studentRes;
		console.log('student', students.value)
	});
</script>

<style scoped>
	.container {
		margin: 10px;
		padding: 10px;
		border: 1px solid #ccc;
	}

	.student-item {
		margin-bottom: 15px;
		padding: 10px;
		border-bottom: 1px solid #ddd;
	}

	.student-info {
		margin-bottom: 10px;
	}

	.relative-list {
		margin-left: 20px;
	}

	.relative-item {
		margin-bottom: 5px;
	}
</style>